<script setup>
import { onMounted, reactive, ref } from 'vue';
import { getSpuInfoListApi, getSpuInfoByIdApi, updateSpuInfoApi } from '@/apis/pms/spu.js'
import { uppmsApi, downpmsApi } from '@/apis/pms/goods.js'
import { Search, EditPen, Promotion, CloseBold, Refresh } from '@element-plus/icons-vue'
import categoryCascader from '@/views/common/categoryCascader'
import brandSelect from '@/views/common/brandSelect';

const paramsPath = ref([])
const params = reactive({
  spuTitle: '',
  categoryId: '',
  brandId: '',
  status: '',
  pageNum: 1,
  pageSize: 10,
})

const loading = ref(false)

const spuData = ref({})
const getSpuInfoList = async () => {
  loading.value = true
  const res = await getSpuInfoListApi(params);
  spuData.value = res.data;
  loading.value = false
}

const dialogFormVisible = ref(false)
const spuInfoForm = ref({})
const formPath = ref([])
const handleUpdate = async(spuId) => {
  const res = await getSpuInfoByIdApi(spuId);
  spuInfoForm.value = res.data;
  formPath.value = spuInfoForm.value.categoryIds;
  dialogFormVisible.value = true;
}

// 条件查询
const handleQuery = () => {
  params.categoryId = paramsPath.value[paramsPath.value.length - 1]
  getSpuInfoList();
}

// 分页
const getSpuListPage = (currentIndex) => {
  params.pageNum = currentIndex;
  getSpuInfoList();
}

// 重置
const handleRefresh= () => {
  paramsPath.value = [];
  params.spuTitle = '';
  params.categoryId = '';
  params.brandId = '';
  params.status = '';
  params.pageNum = 1;
  params.pageSize = 10;
  getSpuInfoList()
}

// 确定
const handleConfirm = () => {
  if(categoryPath.value.length === 0){
    ElMessage({
      message: '未选择分类数据',
      type: 'warning',
    })
    return;
  }
  spuInfoForm.value.categoryId = formPath.value[formPath.value.length - 1];
  updateSpuInfoApi(spuInfoForm.value)
  .then(res=>{
    if(res.code === 0){
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
    }
  })
}

// 上架
const handleUp = (spuId) => {
  uppmsApi(spuId).then(res =>{
    if(res.code === 0){
      ElMessage({
        message: '上架成功',
        type: 'success',
      })
      getSpuInfoList()
    }
  })
}

// 下架
const handleDown = (spuId) => {
  downpmsApi([spuId]).then(res =>{
    if(res.code === 0){
      ElMessage({
        message: '下架成功',
        type: 'success',
      })
      getSpuInfoList()
    }
  })
}

onMounted(() => getSpuInfoList());
</script>

<template>
  <div class="container" v-loading="loading">
    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <span style="display: inline-block;width: 70px;">Spu标题</span>
        <el-input v-model="params.spuTitle" placeholder="请输入要检索的Spu标题" clearable style="width: 260px;" />
        <span style="display: inline-block;width: 55px;margin-left: 10px;">分类名</span>
        <categoryCascader v-model:categoryPath="paramsPath" style="width: 240px;" ></categoryCascader>
        <span style="display: inline-block;width: 55px;margin-left: 10px;">品牌名</span>
        <brandSelect v-model:brandId="params.brandId" v-model:categoryId="paramsPath[paramsPath.length - 1]" style="width: 240px;">
        </brandSelect>
        <span style="display: inline-block;width: 45px;margin-left: 10px;">状态</span>
        <el-select v-model="params.status" clearable placeholder="请选择商品状态" style="width:240px;">
          <el-option label="上架" :value="0" />
          <el-option label="下架" :value="1" />
          <el-option label="新建" :value="2" />
        </el-select>
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleQuery">搜索</el-button>
        <el-button @click="handleRefresh" :icon="Refresh">重置</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="spuData.list" border style="width: 100%">
          <el-table-column prop="spuTitle" label="Spu标题" align="center" />
          <el-table-column prop="subtitle" label="副标题" align="center" />
          <el-table-column prop="status" label="状态" width="120" align="center">
            <template v-slot="scope">
              <el-tag v-if="scope.row.status === 0" type="success" style="font-size: 15px;">上架</el-tag>
              <el-tag v-else-if="scope.row.status === 1" type="warning" style="font-size: 15px;">下架</el-tag>
              <el-tag v-else style="font-size: 15px;">新建</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="250" align="center" />
          <el-table-column prop="updateTime" label="修改时间" width="250" align="center" />
          <el-table-column label="操作" width="240" align="center">
            <template v-slot="scope">
              <div style="display:flex;justify-content:center;align-items:center;">
                <el-button v-if="scope.row.status === 2 || scope.row.status === 1" type="primary" text size="small" :icon="Promotion" @click="handleUp(scope.row.spuId)">上架</el-button>
                <el-button v-else type="primary" text size="small" :icon="CloseBold" @click="handleDown(scope.row.spuId)">下架</el-button>
                <!-- <el-dropdown @command="handleCommand(scope.row, $event)" size="small" type="text">
                  <span class="el-dropdown-link" style="color:#409EFF;">更多</span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="skuInventory">库存管理</el-dropdown-item>
                      <el-dropdown-item>Action 2</el-dropdown-item>
                      <el-dropdown-item>Action 3</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <div class="pageination">
      <el-pagination v-model:current-change="spuData.pageNum" :page-size="spuData.pageSize" background
        layout="prev, pager, next" :page-count="spuData.pages" @current-change="getSpuListPage" />
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" title="修改" style="width: 35%;">
    <el-form :model="spuInfoForm" label-width="90px">
      <el-form-item label="Spu标题">
        <el-input v-model="spuInfoForm.spuTitle" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Spu副标题">
        <el-input v-model="spuInfoForm.subtitle" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所属分类">
        <categoryCascader v-model:categoryPath="formPath"/>
      </el-form-item>
      <el-form-item label="所属品牌">
        <brandSelect v-model:brandId="spuInfoForm.brandId" v-model:categoryId="formPath[formPath.length - 1]" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="spuInfoForm.sort" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang='scss'></style>